<template>
  <div class="page classifyPage">
    <div class="page-waprrer" style="overflow: hidden">
      <Search ref="search" v-model="searchText" @on-submit="searchSubmit" class="classify-search"></Search>
      <Scroll @flick-left="goback" :pullUpLoad="true" @pullingUp="" ref="scroll" :data="goodsItems"
              :listenScrollBottom="true" @scrollBottom="update">
        <div>
          <div class="classify-list">
            <template v-for="(item,index) in goodsItems">
              <goodsItem
                :href="'/goods/' + item.id"
                :type="classify_mode"
                :img="item.imgpath"
                :title="item.name"
                :note="item.sellerpoints"
                :price="item.shop_price"
                :id="item.id"
                :key="index"
              >
              </goodsItem>
            </template>
            <LoadMore style="margin-top: 0.6rem" :show-loading="true" v-if="loading"></LoadMore>
            <LoadMore style="margin-top: 0.6rem" :show-loading="false" v-else-if="!loading && finish"
                      :tip="'暂无数据'"></LoadMore>
          </div>
        </div>
      </Scroll>
    </div>
  </div>
</template>
<script>
  import {Search, LoadMore} from 'vux'
  import _ from "lodash";
  import Scroll from "base/scroll/scroll"
  import Bus from "common/js/bus";
  import {mapGetters, mapMutations} from "vuex";
  import goodsItem from "../base/goodsItem/goodsItem";
  import {getData} from "api/classify"
  import {classifySearchWord} from "api/classify";

  export default {
    data() {
      return {
        goodsItems: [],
        loading: true,
        finish: false,
        page: 1,
        id: -1,
        searchText: ""
      }
    },
    methods: {
      fetchData(id) {
        this.setDrawerState(false);
        this._getData({goods_cate: id, p: this.page, Uid: 1});
      },
      _getData(params) {
        Bus.$emit("loading-on");
        _.delay(() => {
          getData(params).then((Rs) => {
            this.goodsItems = Rs.data;
            Math.ceil(Rs.total / Rs.per_page) === this.page || Math.ceil(Rs.total / Rs.per_page) === 0 ? (() => {
              this.finish = true;
              this.loading = false
            })() : null;
            this.$refs.scroll.finishPullUp();
            Bus.$emit("loading-off");
          })
        }, 300);
      },
      update() {
        if (!this.finish) {
          Bus.$emit("loading-on");
          getData({goods_cate: this.id, p: this.page + 1, Uid: 1,name: this.searchText || "" }).then((Rs) => {
            Bus.$emit("loading-off");
            Math.ceil(Rs.total / Rs.per_page) === this.page || Math.ceil(Rs.total / Rs.per_page) === 0 ? (() => {
              this.finish = true;
              this.loading = false
            })() : null;
            this.page++;
//            推送数据
            Rs.data.forEach((item) => {
              this.goodsItems.push(item);
            });
          })
        }
      },
      goback() {
        window.history.go(-1);
      },
      searchSubmit() {
        this.$refs.search.setBlur();
        Bus.$emit("loading-on");
        if(this.searchText === ""){
           this.fetchData(this.id);
           return
        }
        classifySearchWord({
          page: 1,
          text: this.searchText,
          cate: this.id
        }).then((Rs) => {
          Bus.$emit("loading-off");
          Math.ceil(Rs.total / Rs.per_page) === this.page || Math.ceil(Rs.total / Rs.per_page) === 0 ? (() => {
            this.finish = true;
            this.loading = false
          })() : null;
          this.goodsItems = Rs.data;
        });
      },
      ...mapMutations({
        "setDrawerState": "SET_DRAWER_STATE",
        "setCommonHeader": "SET_COMMON_HEADER",
        "setGoodsIndex": "SET_GOODS_INDEX",
      })
    },
    mounted() {
      this.setCommonHeader(3);
    },
    components: {Scroll, Search, goodsItem, LoadMore},
    beforeRouteEnter(to, from, next) {
      let {id} = to.params;
      next(vm => {
        Bus.$emit("loading-off");
        if (from.fullPath === "/") {
          vm.setGoodsIndex(id);
          vm.id = id;
          vm.fetchData(vm.id);
        }
      })
    },
    watch: {
      '$route': function (to, from) {
        if (to.matched[0].path === from.matched[0].path) {
          this.finish = false;
          this.id = to.params.id;
          this.page = 1;
          this.fetchData(this.id);
        }
      },
      'classify_mode': function () {
        _.delay(() => {
          this.$refs.scroll.refresh();
        }, 20);
      },
    },
    computed: {
      ...mapGetters(['classify_mode'])
    },
  }
</script>
<style lang="less">
  @import "../common/style/helpers/mixins";

  .classify-search {
    padding-top: 46px;
    position: fixed !important;
    top: 0;
    z-index: 100086;
  }

  .classify-list {
    padding-top: 100px;
    display: flex;
    flex-wrap: wrap;
  }

  .classifyPage {
    .weui-loadmore {
      margin: 1em auto;
      line-height: 1.2em;
    }
  }
</style>
